<template>
  <div class="body-bg">
    <audio :src="music" autoplay="autoplay" loop="loop" preload="=metadata" id="audioDetail"></audio>
    <div class="container">
      <img class="background" :src="backjpg" />

      <img class="cloud-bg" :src="cloud_bg" />
      <img class="cloud-bg2" :src="cloud_bg" />

      <div class="castle-container">
        <div class="castle">
          <div class="brleg">
            <img class="brfoot" :src="brfoot" />
            <img class="brbottom" :src="brbottom" />
          </div>
          <div class="frleg">
            <img class="frfoot" :src="frfoot" />
            <img class="frbottom" :src="frbottom" />
          </div>
          <img class="chimney3" :src="chimney3" />
          <img class="treehouse" :src="treehouse" />
          <div class="houses-group">
            <img class="point6" :src="point6" />
            <img class="point5" :src="point5" />
            <img class="point4" :src="point4" />
            <img class="houses" :src="houses" />
          </div>
          <img class="chimney2" :src="chimney2" />
          <img class="chimney1" :src="chimney1" />
          <img class="wing" :src="wing" />
          <div class="mound-group">
            <img class="antenna" :src="wing" />
            <img class="point3" :src="point3" />
            <img class="point2" :src="point2" />
            <img class="point1" :src="point1" />
            <img class="mound" :src="mound" />
          </div>
          <img class="wind" :src="wind" />
          <img class="cannon" :src="cannon" />
          <img class="main" :src="main" />
          <div class="blleg">
            <div class="blbottom-group">
              <img class="blfoot" :src="flfoot" />
              <img class="blbottom" :src="flbottom" />
            </div>
            <img class="bltop" :src="fltop" />
          </div>
          <img class="blcover" :src="blcover" />
          <img class="knob" :src="knob" />
          <img class="tele" :src="tele" />
          <img class="telecover" :src="telecover" />
          <div class="flleg">
            <div class="flbottom-group">
              <img class="flfoot" :src="flfoot" />
              <img class="flbottom" :src="flbottom" />
            </div>
            <img class="fltop" :src="fltop" />
          </div>
          <img class="flcover" :src="flcover" />
        </div>
      </div>

      <img class="foreground" :src="foreground" />

      <div class="clouds">
        <img class="cloud-shadow1" :src="cloud_shadow_1" />
        <img class="cloud-shadow2" :src="cloud_shadow_1" />
        <img class="cloud-shadow3" :src="cloud_shadow_1" />
        <img class="cloud1" :src="cloud_1" />
        <img class="cloud2" :src="cloud_1" />
        <img class="cloud3" :src="cloud_2" />
        <img class="cloud4" :src="cloud_1" />
        <img class="cloud5" :src="cloud_2" />
      </div>
    </div>
    <div class="load-gate">Loading...</div>
  </div>
</template>
<script>
import gasp from "gsap";
import {
  TweenMax,
  TweenLite,
  Power1,
  Linear,
  TimelineMax,
  Power3,
  Power2
} from "gsap";
import Script from "../assets/js/script";
export default {
  name: "Unknown",
  data() {
    return {
      key: 0,
      backjpg: require("../assets/img/background.jpg"),
      music: require("../assets/music/music.mp3"),
      cloud_bg: require("../assets/img/cloud-bg.png"),
      brfoot: require("../assets/img/brfoot.png"),
      brbottom: require("../assets/img/brbottom.png"),
      frfoot: require("../assets/img/frfoot.png"),
      frbottom: require("../assets/img/frbottom.png"),
      chimney3: require("../assets/img/chimney3.png"),
      treehouse: require("../assets/img/treehouse.png"),
      point6: require("../assets/img/point6.png"),
      point5: require("../assets/img/point5.png"),
      point4: require("../assets/img/point4.png"),
      houses: require("../assets/img/houses.png"),
      chimney2: require("../assets/img/chimney2.png"),
      chimney1: require("../assets/img/chimney1.png"),
      wing: require("../assets/img/wing.png"),
      point3: require("../assets/img/point3.png"),
      point2: require("../assets/img/point2.png"),
      point1: require("../assets/img/point1.png"),
      mound: require("../assets/img/mound.png"),
      wind: require("../assets/img/wind.png"),
      cannon: require("../assets/img/cannon.png"),
      main: require("../assets/img/main.png"),
      flfoot: require("../assets/img/flfoot.png"),
      flbottom: require("../assets/img/flbottom.png"),
      fltop: require("../assets/img/fltop.png"),
      blcover: require("../assets/img/blcover.png"),
      knob: require("../assets/img/knob.png"),
      tele: require("../assets/img/tele.png"),
      telecover: require("../assets/img/telecover.png"),
      flcover: require("../assets/img/flcover.png"),
      foreground: require("../assets/img/foreground.png"),
      cloud_shadow_1: require("../assets/img/cloud_shadow-1.png"),
      cloud_1: require("../assets/img/cloud-1.png"),
      cloud_2: require("../assets/img/cloud-2.png")
    };
  },
  mounted() {
    this.play();
  },
  watch: {
    $route(to, from) {
      if (this.$route.name == "Unknown") {
        this.payPause();
      }
    }
  },
  methods: {
    payPause() {
      let audio = document.getElementById("audioDetail");
      audio.play();
    },
    play() {
      {
        var speed = 0.9;
        var WIDTH;
        var HEIGHT;
        var castleWidth;
        var scale;
        var control = false;

        var progress = 0.0;

        var _castleCont = $(".castle-container");
        var _castle = $(".castle");

        var resize = function() {
          WIDTH = window.innerWidth;
          HEIGHT = window.innerHeight;
          scale = WIDTH / 1440;

          castleWidth = _castle.width() * scale;

          TweenLite.set(_castle, { scale: scale * 0.85 });
        };
        resize();
        $(window).on("resize", resize);

        var draw = function() {
          requestAnimationFrame(draw);

          progress += 0.0012 * speed;
          if (progress > 1) progress = 0;
          if (progress < 0) progress = 1;

          TweenLite.set(_castleCont, {
            x: (1440 * scale + castleWidth) * -progress + castleWidth / 2,
            y: 900 * scale * -(0.36 + progress * 0.35)
          });
        };

        $(document).on("mousemove", function(e) {
          if (!control) return;

          speed = (1 - (e.clientX / WIDTH) * 2) * 2;

          tl.timeScale(speed);
          tl2.timeScale(speed);
          tl3.timeScale(speed);
          tl4.timeScale(speed);
          tl5.timeScale(speed);
        });

        TweenLite.defaultEase = Power1.easeInOut;

        var cloudIntro = function() {
          TweenLite.to($(".cloud1"), 20, {
            x: WIDTH * 2,
            y: 300 * scale,
            opacity: 0.3,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud-shadow1"), 20, {
            x: WIDTH * 2 + 50 * scale,
            y: 450 * scale,
            opacity: 0.2,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud-shadow2"), 20, {
            x: WIDTH * 2 + 50 * scale,
            y: 450 * scale,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud-shadow3"), 20, {
            x: WIDTH * 2 + 50 * scale,
            y: 450 * scale,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud2"), 20, {
            x: WIDTH * 2,
            y: 300 * scale,
            opacity: 0.5,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud3"), 20, {
            x: WIDTH * 2,
            y: 300 * scale,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud4"), 20, {
            x: WIDTH * 2,
            y: 300 * scale,
            ease: Linear.easeNone,
            force3D: true
          });
          TweenLite.to($(".cloud5"), 20, {
            x: WIDTH * 2,
            y: 300 * scale,
            ease: Linear.easeNone,
            force3D: true,
            onComplete: function() {
              $(".clouds").remove();
            }
          });
        };

        var init = function() {
          TweenLite.to($(".load-gate"), 0.5, {
            opacity: 0,
            onComplete: function() {
              $(".load-gate").remove();
            }
          });
          requestAnimationFrame(draw);
          cloudIntro();
        };
        if (document.readyState == "complete") {
          init();
        } else {
          $(window).on("load", init);
        }

        TweenMax.to($(".cloud-bg"), 40, {
          x: WIDTH * 2,
          y: 200 * scale,
          ease: Linear.easeNone,
          repeat: -1,
          force3D: true,
          onRepeat: function() {}
        });

        TweenMax.to($(".cloud-bg2"), 40, {
          x: WIDTH * 2,
          y: 200 * scale,
          ease: Linear.easeNone,
          delay: 10,
          repeat: -1,
          force3D: true
        });

        var tl = new TimelineMax({
          repeat: -1,
          onReverseComplete: function() {
            this.seek(tl.duration());
          }
        });

        var _flleg = $(".flleg");
        var _flbottomGroup = $(".flbottom-group");
        var _flfoot = $(".flfoot");

        TweenLite.set(_flleg, { rotationZ: 45, x: -5 });
        TweenLite.set(_flbottomGroup, { rotationZ: 5 });
        TweenLite.set(_flfoot, { rotationZ: -50 });

        tl.add([
          TweenLite.to(_flleg, 1.0, {
            rotationZ: -45,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_flleg, 0.2, {
            x: 0,
            delay: 0.0,
            ease: Power1.easeOut,
            force3D: true
          }),

          TweenLite.to(_flleg, 0.55, {
            scaleY: 0.8,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_flbottomGroup, 0.55, {
            scaleY: 0.8,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_flbottomGroup, 0.6, {
            rotationZ: 20,
            delay: 0.0,
            ease: Power3.easeIn,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.55, {
            scaleY: 1.5,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.6, {
            rotationZ: 10,
            delay: 0.0,
            ease: Power2.easeIn,
            force3D: true
          }),

          TweenLite.to(_flleg, 0.4, { scaleY: 1.0, delay: 0.6, force3D: true }),
          TweenLite.to(_flbottomGroup, 0.4, {
            scaleY: 0.7,
            delay: 0.6,
            force3D: true
          }),
          TweenLite.to(_flbottomGroup, 0.4, {
            rotationZ: 50,
            delay: 0.6,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.2, {
            rotationZ: 10,
            delay: 0.6,
            ease: Linear.easeNone,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.2, {
            rotationZ: -10,
            delay: 0.8,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.4, {
            scaleY: 1.5,
            delay: 0.6,
            force3D: true
          }),

          TweenLite.to(_flleg, 0.6, { x: 20, delay: 0.7, force3D: true }),

          TweenLite.to(_flleg, 0.5, {
            rotationZ: 0,
            delay: 1.0,
            ease: Power1.easeIn,
            force3D: true
          }),
          TweenLite.to(_flleg, 0.5, { scaleY: 0.8, delay: 1.0, force3D: true }),
          TweenLite.to(_flbottomGroup, 0.5, {
            scaleY: 0.5,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.5, {
            scaleX: 1.8,
            scaleY: 1.7,
            delay: 1.0,
            ease: Power1.easeIn,
            force3D: true
          }),
          TweenLite.to(_flbottomGroup, 0.5, {
            rotationZ: 40,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.5, {
            rotationZ: -70,
            delay: 1.0,
            force3D: true
          }),

          TweenLite.to(_flleg, 0.5, {
            rotationZ: 45,
            delay: 1.5,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_flleg, 0.5, { scaleY: 1.0, delay: 1.5, force3D: true }),
          TweenLite.to(_flbottomGroup, 0.5, {
            scaleY: 1.0,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_flbottomGroup, 0.5, {
            rotationZ: 5,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.5, {
            rotationZ: -50,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_flfoot, 0.5, {
            scaleX: 1.0,
            scaleY: 1.0,
            delay: 1.5,
            force3D: true
          }),

          TweenLite.to(_flleg, 0.5, { x: -10, delay: 1.3, force3D: true }),

          TweenLite.to(_flleg, 0.2, {
            x: -5,
            delay: 1.8,
            ease: Power1.easeIn,
            force3D: true
          })
        ]);

        var tl2 = new TimelineMax({
          repeat: -1,
          delay: 0.7,
          onReverseComplete: function() {
            this.seek(tl2.duration());
          }
        });

        var _blleg = $(".blleg");
        var _blbottomGroup = $(".blbottom-group");
        var _blfoot = $(".blfoot");

        TweenLite.set(_blleg, { rotationZ: 45, x: -5 });
        TweenLite.set(_blbottomGroup, { rotationZ: 5 });
        TweenLite.set(_blfoot, { rotationZ: -50 });

        tl2.add([
          TweenLite.to(_blleg, 1.0, {
            rotationZ: -45,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_blleg, 0.2, {
            x: 0,
            delay: 0.0,
            ease: Power1.easeOut,
            force3D: true
          }),

          TweenLite.to(_blleg, 0.55, {
            scaleY: 0.8,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_blbottomGroup, 0.55, {
            scaleY: 0.8,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_blbottomGroup, 0.6, {
            rotationZ: 20,
            delay: 0.0,
            ease: Power3.easeIn,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.55, {
            scaleY: 1.5,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.6, {
            rotationZ: 10,
            delay: 0.0,
            ease: Power2.easeIn,
            force3D: true
          }),

          TweenLite.to(_blleg, 0.4, { scaleY: 1.0, delay: 0.6, force3D: true }),
          TweenLite.to(_blbottomGroup, 0.4, {
            scaleY: 0.7,
            delay: 0.6,
            force3D: true
          }),
          TweenLite.to(_blbottomGroup, 0.4, {
            rotationZ: 50,
            delay: 0.6,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.2, {
            rotationZ: 10,
            delay: 0.6,
            ease: Linear.easeNone,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.2, {
            rotationZ: -10,
            delay: 0.8,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.4, {
            scaleY: 1.5,
            delay: 0.6,
            force3D: true
          }),

          TweenLite.to(_blleg, 0.6, { x: 20, delay: 0.7, force3D: true }),

          TweenLite.to(_blleg, 0.5, {
            rotationZ: 0,
            delay: 1.0,
            ease: Power1.easeIn,
            force3D: true
          }),
          TweenLite.to(_blleg, 0.5, { scaleY: 0.8, delay: 1.0, force3D: true }),
          TweenLite.to(_blbottomGroup, 0.5, {
            scaleY: 0.5,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.5, {
            scaleX: 1.8,
            scaleY: 1.7,
            delay: 1.0,
            ease: Power1.easeIn,
            force3D: true
          }),
          TweenLite.to(_blbottomGroup, 0.5, {
            rotationZ: 40,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.5, {
            rotationZ: -70,
            delay: 1.0,
            force3D: true
          }),

          TweenLite.to(_blleg, 0.5, {
            rotationZ: 45,
            delay: 1.5,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_blleg, 0.5, { scaleY: 1.0, delay: 1.5, force3D: true }),
          TweenLite.to(_blbottomGroup, 0.5, {
            scaleY: 1.0,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_blbottomGroup, 0.5, {
            rotationZ: 5,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.5, {
            rotationZ: -50,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_blfoot, 0.5, {
            scaleX: 1.0,
            scaleY: 1.0,
            delay: 1.5,
            force3D: true
          }),

          TweenLite.to(_blleg, 0.5, { x: -10, delay: 1.3, force3D: true }),

          TweenLite.to(_blleg, 0.2, {
            x: -5,
            delay: 1.8,
            ease: Power1.easeIn,
            force3D: true
          })
        ]);

        var tl3 = new TimelineMax({
          repeat: -1,
          delay: 1.0,
          onReverseComplete: function() {
            this.seek(tl3.duration());
          }
        });

        var _frleg = $(".frleg");
        var _frfoot = $(".frfoot");

        TweenLite.set(_frleg, { rotationZ: 35, x: -40 });
        TweenLite.set(_frfoot, { rotationZ: -35 });

        tl3.add([
          TweenLite.to(_frleg, 0.9, {
            rotationZ: -35,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_frleg, 1.2, {
            x: 40,
            delay: 0.0,
            ease: Power1.easeOut,
            force3D: true
          }),

          TweenLite.to(_frfoot, 0.9, {
            rotationZ: 35,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_frleg, 0.4, {
            y: -15,
            delay: 0.0,
            ease: Power1.easeIn,
            force3D: true
          }),
          TweenLite.to(_frleg, 0.4, {
            y: 0,
            delay: 0.5,
            ease: Power1.easeOut,
            force3D: true
          }),

          TweenLite.to(_frleg, 1.1, {
            rotationZ: 35,
            delay: 0.9,
            force3D: true
          }),
          TweenLite.to(_frleg, 0.6, { x: -50, delay: 1.2, force3D: true }),

          TweenLite.to(_frfoot, 0.5, {
            rotationZ: -50,
            delay: 0.9,
            force3D: true
          }),
          TweenLite.to(_frfoot, 0.3, {
            rotationZ: -35,
            delay: 1.7,
            force3D: true
          }),

          TweenLite.to(_frleg, 0.6, { y: -40, delay: 0.9, force3D: true }),
          TweenLite.to(_frleg, 0.5, { y: 0, delay: 1.5, force3D: true }),

          TweenLite.to(_frleg, 0.2, {
            x: -40,
            delay: 1.8,
            ease: Power1.easeIn,
            force3D: true
          })
        ]);

        var tl4 = new TimelineMax({
          repeat: -1,
          delay: 1.7,
          onReverseComplete: function() {
            this.seek(tl4.duration());
          }
        });

        var _brleg = $(".brleg");
        var _brfoot = $(".brfoot");

        TweenLite.set(_brleg, { rotationZ: 35, x: -40 });
        TweenLite.set(_brfoot, { rotationZ: -35 });

        tl4.add([
          TweenLite.to(_brleg, 0.9, {
            rotationZ: -35,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_brleg, 1.2, {
            x: 40,
            delay: 0.0,
            ease: Power1.easeOut,
            force3D: true
          }),

          TweenLite.to(_brfoot, 0.9, {
            rotationZ: 35,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_brleg, 0.4, {
            y: -15,
            delay: 0.0,
            ease: Power1.easeIn,
            force3D: true
          }),
          TweenLite.to(_brleg, 0.4, {
            y: 0,
            delay: 0.5,
            ease: Power1.easeOut,
            force3D: true
          }),

          TweenLite.to(_brleg, 1.1, {
            rotationZ: 35,
            delay: 0.9,
            force3D: true
          }),
          TweenLite.to(_brleg, 0.6, { x: -50, delay: 1.2, force3D: true }),

          TweenLite.to(_brfoot, 0.5, {
            rotationZ: -50,
            delay: 0.9,
            force3D: true
          }),
          TweenLite.to(_brfoot, 0.3, {
            rotationZ: -35,
            delay: 1.7,
            force3D: true
          }),

          TweenLite.to(_brleg, 0.6, { y: -40, delay: 0.9, force3D: true }),
          TweenLite.to(_brleg, 0.5, { y: 0, delay: 1.5, force3D: true }),

          TweenLite.to(_brleg, 0.2, {
            x: -40,
            delay: 1.8,
            ease: Power1.easeIn,
            force3D: true
          })
        ]);

        var tl5 = new TimelineMax({
          repeat: -1,
          delay: 0.0,
          onReverseComplete: function() {
            this.seek(tl5.duration());
          }
        });
        var _castle = $(".castle");
        TweenLite.set(_castle, { rotationZ: 9 });
        tl5.add([
          TweenLite.to(_castle, 1.0, {
            rotationZ: 7,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_castle, 1.0, {
            rotationZ: 9,
            delay: 1.0,
            force3D: true
          }),

          TweenLite.to(_castle, 0.5, {
            x: "+=" + 2 * scale,
            y: "-=" + 4 * scale,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_castle, 0.5, {
            x: "-=" + 4 * scale,
            y: "+=" + 4 * scale,
            delay: 0.5,
            force3D: true
          }),
          TweenLite.to(_castle, 0.5, {
            x: "+=" + 4 * scale,
            y: "-=" + 5 * scale,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_castle, 0.5, {
            x: "-=" + 2 * scale,
            y: "+=" + 5 * scale,
            delay: 1.5,
            force3D: true
          })
        ]);

        var tl6 = new TimelineMax({ repeat: -1, delay: 0.2 });
        var _mound = $(".mound-group");
        TweenLite.set(_mound, { rotationZ: 2 });
        tl6.add([
          TweenLite.to(_mound, 1.0, {
            rotationZ: -1,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_mound, 1.0, { rotationZ: 2, delay: 1.0, force3D: true })
        ]);

        var tl7 = new TimelineMax({ repeat: -1, delay: 0.8 });
        var _wing = $(".wing");
        TweenLite.set(_wing, { rotationZ: 2 });
        tl7.add([
          TweenLite.to(_wing, 1.0, {
            rotationZ: -1,
            x: -5,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_wing, 1.0, {
            rotationZ: 2,
            x: 0,
            delay: 1.0,
            force3D: true
          })
        ]);

        var tl8 = new TimelineMax({ repeat: -1, delay: 0.0 });
        var _chimney1 = $(".chimney1");
        TweenLite.set(_chimney1, { rotationZ: -10 });
        tl8.add([
          TweenLite.to(_chimney1, 1.5, {
            rotationZ: 5,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_chimney1, 1.5, {
            rotationZ: -10,
            delay: 1.5,
            force3D: true
          }),

          TweenLite.to(_chimney1, 0.5, {
            y: 5,
            x: 0,
            delay: 0.1,
            force3D: true
          }),
          TweenLite.to(_chimney1, 0.1, {
            y: -15,
            x: 4,
            delay: 0.6,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_chimney1, 0.9, {
            y: 0,
            x: 0,
            delay: 0.7,
            force3D: true
          }),

          TweenLite.to(_chimney1, 0.5, {
            y: 5,
            x: 0,
            delay: 1.6,
            force3D: true
          }),
          TweenLite.to(_chimney1, 0.1, {
            y: -15,
            x: 4,
            delay: 2.1,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_chimney1, 0.5, {
            y: 0,
            x: 0,
            delay: 2.2,
            force3D: true
          })
        ]);

        var tl9 = new TimelineMax({ repeat: -1, delay: 0.5 });
        var _chimney2 = $(".chimney2");
        TweenLite.set(_chimney2, { rotationZ: -10 });
        tl9.add([
          TweenLite.to(_chimney2, 1.5, {
            rotationZ: 5,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_chimney2, 1.5, {
            rotationZ: -10,
            delay: 1.5,
            force3D: true
          }),

          TweenLite.to(_chimney2, 0.5, {
            y: 5,
            x: 0,
            delay: 0.1,
            force3D: true
          }),
          TweenLite.to(_chimney2, 0.1, {
            y: -15,
            x: 4,
            delay: 0.6,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_chimney2, 0.9, {
            y: 0,
            x: 0,
            delay: 0.7,
            force3D: true
          }),

          TweenLite.to(_chimney2, 0.5, {
            y: 5,
            x: 0,
            delay: 1.6,
            force3D: true
          }),
          TweenLite.to(_chimney2, 0.1, {
            y: -15,
            x: 4,
            delay: 2.1,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_chimney2, 0.5, {
            y: 0,
            x: 0,
            delay: 2.2,
            force3D: true
          })
        ]);

        var tl10 = new TimelineMax({ repeat: -1, delay: 1.1 });
        var _chimney3 = $(".chimney3");
        TweenLite.set(_chimney3, { rotationZ: -10 });
        tl10.add([
          TweenLite.to(_chimney3, 1.5, {
            rotationZ: 5,
            delay: 0.0,
            force3D: true
          }),

          TweenLite.to(_chimney3, 1.5, {
            rotationZ: -10,
            delay: 1.5,
            force3D: true
          }),

          TweenLite.to(_chimney3, 0.5, {
            y: 5,
            x: 0,
            delay: 0.1,
            force3D: true
          }),
          TweenLite.to(_chimney3, 0.1, {
            y: -15,
            x: 4,
            delay: 0.6,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_chimney3, 0.9, {
            y: 0,
            x: 0,
            delay: 0.7,
            force3D: true
          }),

          TweenLite.to(_chimney3, 0.5, {
            y: 5,
            x: 0,
            delay: 1.6,
            force3D: true
          }),
          TweenLite.to(_chimney3, 0.1, {
            y: -15,
            x: 4,
            delay: 2.1,
            ease: Power1.easeOut,
            force3D: true
          }),
          TweenLite.to(_chimney3, 0.5, {
            y: 0,
            x: 0,
            delay: 2.2,
            force3D: true
          })
        ]);

        var tl11 = new TimelineMax({ repeat: -1, delay: 0.5 });
        var _houses = $(".houses-group");
        var _point1 = $(".point1");
        var _point2 = $(".point2");
        TweenLite.set(_houses, { rotationZ: 2, x: -4 });
        TweenLite.set(_point1, { rotationZ: 2, x: -2 });
        tl11.add([
          TweenLite.to(_houses, 1.0, {
            rotationZ: -1,
            y: 5,
            x: 0,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_houses, 1.0, {
            rotationZ: 2,
            y: 0,
            x: -4,
            delay: 1.0,
            force3D: true
          }),

          TweenLite.to(_point1, 1.0, {
            rotationZ: -10,
            y: 2,
            x: 0,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_point1, 1.0, {
            rotationZ: 2,
            y: 0,
            x: -2,
            delay: 1.0,
            force3D: true
          }),

          TweenLite.to(_point2, 1.0, {
            rotationZ: -5,
            y: 5,
            x: 2,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_point2, 1.0, {
            rotationZ: 0,
            y: 0,
            x: 0,
            delay: 1.0,
            force3D: true
          })
        ]);

        var tl12 = new TimelineMax({ repeat: -1, delay: 0.45 });
        var _point4 = $(".point4");
        var _point5 = $(".point5");
        var _point6 = $(".point6");
        tl12.add([
          TweenLite.to(_point6, 0.3, { y: 3, delay: 0.0, force3D: true }),
          TweenLite.to(_point6, 0.1, {
            y: -10,
            x: 4,
            delay: 0.3,
            force3D: true
          }),
          TweenLite.to(_point6, 0.9, { y: 0, x: 0, delay: 0.4, force3D: true }),

          TweenLite.to(_point5, 0.3, { y: 3, delay: 0.2, force3D: true }),
          TweenLite.to(_point5, 0.1, {
            y: -7,
            x: 3,
            delay: 0.5,
            force3D: true
          }),
          TweenLite.to(_point5, 0.7, { y: 0, x: 0, delay: 0.6, force3D: true }),

          TweenLite.to(_point4, 0.3, { y: 3, delay: 0.4, force3D: true }),
          TweenLite.to(_point4, 0.1, {
            y: -10,
            x: 4,
            delay: 0.7,
            force3D: true
          }),
          TweenLite.to(_point4, 0.7, { y: 0, x: 0, delay: 0.8, force3D: true })
        ]);

        var tl13 = new TimelineMax({ repeat: -1, delay: 1.4 });
        var _treehouse = $(".treehouse");
        TweenLite.set(_treehouse, { rotationZ: -5, y: 20, x: 4 });
        tl13.add([
          TweenLite.to(_treehouse, 1.0, {
            rotationZ: 10,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_treehouse, 1.0, {
            rotationZ: -5,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_treehouse, 1.0, {
            rotationZ: 10,
            delay: 2.0,
            force3D: true
          }),
          TweenLite.to(_treehouse, 1.0, {
            rotationZ: -5,
            delay: 3.0,
            force3D: true
          }),

          TweenLite.to(_treehouse, 0.4, {
            y: -5,
            x: -2,
            delay: 0.2,
            force3D: true
          }),
          TweenLite.to(_treehouse, 3.2, {
            y: 20,
            x: 4,
            delay: 0.8,
            force3D: true
          })
        ]);

        var tl14 = new TimelineMax({ repeat: -1, delay: 0.65 });
        var _wind = $(".wind");
        var _antenna = $(".antenna");
        var _cannon = $(".cannon");
        var _tele = $(".tele");
        var _knob = $(".knob");
        TweenLite.set(_antenna, { rotationZ: 10, x: 0 });
        TweenLite.set(_wind, { rotationZ: -10, x: 0 });
        TweenLite.set(_knob, { rotationZ: -20, x: 0 });
        tl14.add([
          TweenLite.to(_antenna, 1.0, {
            rotationZ: -5,
            x: 0,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_antenna, 1.0, {
            rotationZ: 10,
            x: 5,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_antenna, 1.0, {
            rotationZ: -10,
            x: -5,
            delay: 2.0,
            force3D: true
          }),
          TweenLite.to(_antenna, 1.0, {
            rotationZ: 10,
            x: 0,
            delay: 3.0,
            force3D: true
          }),

          TweenLite.to(_wind, 1.1, { rotationZ: 5, delay: 0.0, force3D: true }),
          TweenLite.to(_wind, 1.0, {
            rotationZ: -15,
            delay: 1.1,
            force3D: true
          }),
          TweenLite.to(_wind, 1.0, {
            rotationZ: 10,
            delay: 2.1,
            force3D: true
          }),
          TweenLite.to(_wind, 0.9, {
            rotationZ: -10,
            delay: 3.1,
            force3D: true
          }),

          TweenLite.to(_knob, 0.2, {
            rotationZ: 50,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: -20,
            delay: 0.3,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: 45,
            delay: 0.7,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: -25,
            delay: 1.0,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: 30,
            delay: 1.5,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, { rotationZ: 0, delay: 1.9, force3D: true }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: -20,
            delay: 2.2,
            force3D: true
          }),
          TweenLite.to(_knob, 0.3, {
            rotationZ: 60,
            delay: 2.6,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: -10,
            delay: 3.0,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: 40,
            delay: 3.4,
            force3D: true
          }),
          TweenLite.to(_knob, 0.2, {
            rotationZ: -20,
            delay: 3.7,
            force3D: true
          }),

          TweenLite.to(_tele, 1.0, {
            rotationZ: -3,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_tele, 1.0, { rotationZ: 2, delay: 1.0, force3D: true }),
          TweenLite.to(_tele, 1.0, {
            rotationZ: -3,
            delay: 2.0,
            force3D: true
          }),
          TweenLite.to(_tele, 1.0, { rotationZ: 0, delay: 3.0, force3D: true }),

          TweenLite.to(_tele, 0.25, { x: 25, y: 4, delay: 0.6, force3D: true }),
          TweenLite.to(_tele, 2.5, { x: 0, y: 0, delay: 0.9, force3D: true }),

          TweenLite.to(_cannon, 0.9, {
            rotationZ: -7,
            delay: 0.0,
            force3D: true
          }),
          TweenLite.to(_cannon, 0.9, {
            rotationZ: 2,
            delay: 0.9,
            force3D: true
          }),
          TweenLite.to(_cannon, 1.1, {
            rotationZ: -5,
            delay: 1.8,
            force3D: true
          }),
          TweenLite.to(_cannon, 1.1, {
            rotationZ: 0,
            delay: 2.9,
            force3D: true
          }),

          TweenLite.to(_cannon, 0.25, {
            x: 30,
            y: 4,
            delay: 0.85,
            force3D: true
          }),
          TweenLite.to(_cannon, 2.6, { x: 0, y: 0, delay: 1.4, force3D: true })
        ]);
      }
    }
  }
};
</script>
<style scoped>
.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: #2294b3;
}
.container {
  padding-top: 62.5%;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

img,
.mound-group,
.houses-group,
.flbottom-group,
.blbottom-group,
.brleg,
.frleg,
.blleg,
.flleg {
  position: absolute;
  transform-style: preserve-3d;
}

.castle-container {
  position: absolute;
  left: 100%;
  bottom: 0%;
}
.castle {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 750px;
  perspective: 1000px;
  transform-origin: 50% 70%;
  transform: translate(-50%, -70%) rotateZ(9deg);
}
.brleg {
  left: 400px;
  top: 625px;
  transform-origin: 10px -10px;
  transform: rotateZ(0deg);
}
.brfoot {
  left: -18px;
  top: 82px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}
.frleg {
  left: 240px;
  top: 653px;
  transform-origin: 8px -10px;
  transform: rotateZ(0deg);
}
.frfoot {
  left: -18px;
  top: 51px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.chimney3 {
  left: 400px;
  top: 30px;
  transform-origin: 45% 120%;
  transform: rotateZ(0deg);
}
.houses-group {
  left: 305px;
  top: 130px;
  transform-origin: -50px 300px;
  transform: rotateZ(1deg);
}
.point6 {
  left: 84px;
  top: 19px;
  transform-origin: 40% 120%;
  transform: rotateZ(0deg);
}
.point5 {
  left: 70px;
  top: -23px;
  transform-origin: -40% 200%;
  transform: rotateZ(0deg);
}
.point4 {
  left: 40px;
  top: -17px;
  transform-origin: 0% 100%;
  transform: rotateZ(0deg);
}
.treehouse {
  left: 220px;
  top: 10px;
  transform-origin: 50% 150%;
  transform: rotateZ(0deg);
}
.chimney2 {
  left: 430px;
  top: 120px;
  transform-origin: 0% 90%;
  transform: rotateZ(0deg);
}
.chimney1 {
  left: 420px;
  top: 90px;
  transform-origin: -10% 90%;
  transform: rotateZ(0deg);
}
.wing {
  left: 420px;
  top: 370px;
  transform-origin: 0% 50%;
  transform: rotateZ(0deg);
}
.antenna {
  left: -100px;
  top: 90px;
  transform-origin: 100% 65%;
  transform: rotateZ(0deg);
}
.mound-group {
  left: 115px;
  top: 110px;
  transform-origin: 110px 220px;
  transform: rotateZ(0deg);
}
.point3 {
  left: 125px;
  top: -13px;
  transform-origin: 50% 400%;
  transform: rotateZ(0deg);
}
.point2 {
  left: 50px;
  top: -22px;
  transform-origin: 120% 200%;
  transform: rotateZ(0deg);
}
.point1 {
  left: 4px;
  top: 55px;
  transform-origin: 150% 150%;
  transform: rotateZ(0deg);
}

.wind {
  left: 400px;
  top: 260px;
  transform-origin: 0% 90%;
  transform: rotateZ(0deg);
}
.cannon {
  left: 30px;
  top: 460px;
  transform-origin: 100% 60%;
  transform: rotateZ(0deg);
}
.main {
  left: 80px;
  top: 230px;
  transform-origin: 50% 50%;
  transform: rotateZ(0deg);
}
.blleg {
  left: 410px;
  top: 615px;
  transform-origin: 10px 15px;
  transform: rotateZ(0deg);
}
.blbottom-group {
  left: 0px;
  top: 60px;
  transform-origin: 10px 0px;
  transform: rotateZ(0deg);
}
.blfoot {
  left: -19px;
  top: 68px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.blcover {
  left: 360px;
  top: 573px;
}
.knob {
  left: 214px;
  top: 524px;
  transform-origin: 30% 63%;
  transform: rotateZ(0deg);
}
.tele {
  left: 90px;
  top: 430px;
  transform-origin: 90% 50%;
  transform: rotateZ(0deg);
}
.telecover {
  left: 161px;
  top: 399px;
}
.flleg {
  left: 250px;
  top: 615px;
  transform-origin: 10px 15px;
  transform: rotateZ(0deg);
}
.flbottom-group {
  left: 0px;
  top: 60px;
  transform-origin: 10px 0px;
  transform: rotateZ(0deg);
}
.flfoot {
  left: -19px;
  top: 68px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.flcover {
  left: 244px;
  top: 567px;
}

.foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.background {
  position: absolute;
  bottom: 25.5%;
  left: 0;
  width: 100%;
}

.cloud-bg {
  bottom: 17%;
  width: 80%;
  right: 100%;
}
.cloud-bg2 {
  bottom: 17%;
  width: 80%;
  right: 100%;
}

.cloud-shadow1 {
  bottom: 43%;
  right: 100%;
  width: 80%;
  transform: rotate(5deg);
}
.cloud1 {
  bottom: 30%;
  right: 100%;
  width: 80%;
}
.cloud-shadow2 {
  bottom: 12%;
  left: 36%;
  width: 80%;
  transform: rotate(5deg);
}
.cloud-shadow3 {
  bottom: 31%;
  left: -30%;
  width: 80%;
  transform: rotate(5deg);
}
.cloud2 {
  bottom: 46%;
  left: -29%;
  width: 80%;
}
.cloud3 {
  bottom: 38%;
  left: 17%;
  width: 80%;
}
.cloud4 {
  bottom: 18%;
  left: -18%;
  width: 80%;
}
.cloud5 {
  bottom: 8%;
  left: 40%;
  width: 80%;
}

.load-gate {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 20px;
}
</style>